<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>添加表格调查项</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/lxq.css">
    <script type="text/javascript" src="../layui/jquery-3.3.1.min.js"></script>
</head>
<body class="layui-layout-body">
<form action="" id="field_form">
	<table>
		<thead>
			<tr>
				<th>项名</th>
				<th>类别</th>
				<th>选项</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="data_body">
		
		</tbody>
	</table>

</form>
<button class="add" id="field_add">添加项</button>

<script>
var fieldNum=0;
$(function(){
	  $(".add").on("click",function(){
		  
	      fieldNum++;
		  $("#data_body").append("<tr>"+
			  "<td>"+
			  "<input type='text' class='fName' placeholder='请填写项名 '/>"+
			  "</td>"+
			  "<td>"+
			  "<select class='fType' >"+
			  "<option value='0' selected='selected'>"+
			  "填空"+
			  "</option>"+
			  "<option value='1'>"+
			  "文本"+
			  "</option>"+
			  "<option value='2'>"+
			  "单选"+
			  "</option>"+
			  "<option value='2'>"+
			  "多选"+
			  "</option>"+
			  "</select>"+
			  "</td>"+
			  /* 选择字段类型打印结束 */
			  "<td>"+
			  "<input class='fOption' type='text' placeholder='填写选项答案，回车键隔开'/>"+
			  "</td>"+
			  /* 填写字段长度打印结束 */
			  "<td>"+
			  "<a href='#' class='delete'>删除</a>"+
			  "</td>"+
			  "</tr>"
			  /*添加、删除打印结束  */
		  );
		
	});
	  
	  
	 	//刪除
	 	$("#data_body").delegate(".delete","click",function(){
	 		 $(this).parent().parent().remove();
	 		fieldNum--;
	 	});
	  
});
</script>


</body>
</html>